<template>
	<view class="col" style="position: relative;">
		<view class="title row-h-center ">
			<view class="title-cart row-center">
				<image src="/static/images/buy_img_logo.png" class="title-cart-img"></image>
			</view>
			<view class="title-text">
				海源粮油公司
			</view>
		</view>

		<view class="row" style="margin: 20rpx 20rpx 0 20rpx;">
			<view :class="typeIndex==0?'type-y':'type-n'" @click="typeIndex=0">订单</view>
			<view :class="typeIndex==1?'type-y':'type-n'" @click="typeIndex=1">付款</view>
			<view :class="typeIndex==2?'type-y':'type-n'" @click="typeIndex=2">本月交易明细</view>
		</view>

		<view class="row-between-center" style="margin: 20rpx 20rpx 0 20rpx;" v-if="typeIndex==0">
			<u-input class="input" prefixIcon="search" placeholder="搜索" border="none"
				prefixIconStyle="margin-left:26rpx">
				<template slot="suffix">
					<view class="search row-center">
						搜索
					</view>
				</template>
			</u-input>
			<view class="filter row-center">
				<image class="filter-img" src="/static/images/filter.png"></image>
			</view>
		</view>
		<view class="line"></view>

		<view class="row">
			<view class="item col" v-if="typeIndex==0">
				<view class="row-center" :class="index==stepIndex?'step-status':'step-status-n'"
					v-for="item,index in stepList" style="white-space:pre-wrap;width: 128rpx;"
					@click="changeStep(index)">
					{{item.name}}
				</view>
			</view>

			<view class="item col" v-if=" typeIndex==1">
				<view class="row-center" :class="index==stepIndex?'step-status':'step-status-n'"
					v-for="item,index in inTypeList" style="white-space:pre-wrap;width: 128rpx;"
					@click="changeStep(index)">
					<u-badge max="99" :value="3" :offset=[-5,0] :absolute="true"></u-badge>
					{{item.name}}

				</view>
			</view>


			<view v-if="typeIndex==0" style="width: 100%;">
				<view class="item1 col" v-for="item in 3" @click="goOrderDetail()">
					<view class="row-between-center">
						<view class="row-center">
							<view class="cart row-center">
								<image src="/static/images/cart.png" class="cart-image"></image>
							</view>
							<view class="item1-title">这是供应商名称</view>
						</view>
						<view class="item1-status">
							待我确认
						</view>

					</view>

					<view class="row-between-center" style="margin-top: 22rpx;">
						<view class="item1-key">订单编号：<span class="item1-value">2888888</span></view>
						<view class="price">20000</view>
					</view>

					<view class="item1-key">商品总数：<span class="item1-value">2888888</span></view>
					<view class="item1-line"></view>
				</view>
			</view>

			<view v-if="typeIndex==1" style="width: 100%;">
				<view class="item1 col" v-for="item in 3">
					<view class="row-between-center">
						<view class="row-center">
							<view class="cart row-center">
								<image src="/static/images/shoukuan.png" class="cart-image"></image>
							</view>
							<view class="item1-title">2023-09-12</view>
						</view>
						<view class="item1-status2">
							待我确认收款
						</view>

					</view>

					<view class="row-between-center" style="margin-top: 22rpx;">
						<view class="item1-key">采购商：<span class="item1-value">青岛露露食品店</span></view>
						<view class="price">20000</view>
					</view>

					<view class="item1-key">备注：<span class="item1-value">优惠300元</span></view>

					<view class="row-end" style="margin-top: 20rpx;">
						<view class="real row-center">
							查看收款凭证截图
						</view>
						<view class="reject row-center">
							驳回
						</view>
						<view class="sure row-center">
							确认
						</view>
					</view>

					<view class="item1-line"></view>

				</view>
			</view>


			<scroll-view :scroll-x="true" v-if="typeIndex==2" style="white-space: nowrap;">
				<view class="col">
					<view class="row item3"
						style="background-color:#F7F8FC;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);">
						<view class="box1 row-center" style="position: fixed;z-index: 99;background: #F7F8FC;">
							日期
						</view>
						<view class="box2 row-center" style="margin-left: 118rpx;">
							业务摘要
						</view>
						<view class="box2 row-center">
							货款金额
						</view>
						<view class="box2 row-center">
							付款金额
						</view>
						<view class="box2 row-center" style="background: #F7F8FC;">
							货款余额
						</view>
					</view>
					<view class="row" v-for="item,index in 4">
						<view class="row item3" v-if="typeIndex==2">
							<view class="box1 num1 row-center"
								:style="index%2!=0?'background: #F7F8FC;':'background: #fff;'  ">
								09-01
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'"
								style="margin-left: 118rpx;">
								期初余额
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'">
								200000
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'">
								200000
							</view>
							<view class="box2 row-center border-right" :class="index%2!=0?'bg1':'bg2'">
								200000
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="bottom row-arround" style="width: 100%;padding: 20rpx;">
			<view class="col-center" @click="showCreate = true">
				<view class="bottom-bg row-center">
					<image src="/static/images/cjyy.png" class="bottom-img"></image>
				</view>
				<view class="bottom-text">创建采购订单</view>
			</view>


			<view class="col-center" @click="goNotice">
				<view class="bottom-bg row-center">
					<image src="/static/images/fqsk.png" class="bottom-img"></image>
				</view>
				<view class="bottom-text">发起付款通知</view>
			</view>
		</view>

		<u-popup :show="showCreate" @close="close" @open="open" mode="bottom" :round="36">
			<view class="pop">
				<view class="row-between-center">
					<view class="pop-title">
						创建采购订单
					</view>
					<image src="/static/images/pop-cloese.png" class="pop-close" @click="showCreate = false"></image>
				</view>
				<view class="pop-item col-center-start pop-text" @click="goCreate">
					从供应商产品库创建订单
				</view>

				<view class="pop-item col-center-start pop-text">
					从供应商产品库创建订单
				</view>
				<view style="height: 60rpx;"></view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCreate: false,
				typeIndex: 0,
				stepList: [{
						'name': '全部'
					},
					{
						'name': '待我确认'
					}, {
						'name': '待我确认'
					}, {
						'name': '供应商\n确认'
					}, {
						'name': '待发货'
					},
					{
						'name': '已收货'
					}, {
						'name': '退货待审核'
					}, {
						'name': '已驳回'
					},
				],

				inTypeList: [{
						'name': '全部'
					},
					{
						'name': '待我确认'
					}, {
						'name': '待我确认\n收款'
					}, {
						'name': '待采购商\n确认收款'
					}, {
						'name': '已确认收款'
					},
					{
						'name': '已驳回收款'
					}, {
						'name': '撤回待供\n应商确认'
					}, {
						'name': '撤回待采\n购商确认'
					}, {
						'name': '已撤回收款'
					},
				],

				stepIndex: 0
			}
		},
		methods: {
			changeStep(index) {
				this.stepIndex = index
			},
			goOrderDetail() {
				uni.navigateTo({
					url: '/src/pages/index/sale_order_detail'
				})
			},
			goNotice() {
				uni.navigateTo({
					url: '/src/pages/index/create_notice'
				})
			},
			goCreate() {
				this.showCreate = false
				uni.navigateTo({
					url: '/src/pages/buy/create_order'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pop {
		border-radius: 36rpx 36rpx 0px 0px;
		background: #F4F5F7;

		.pop-title {
			margin-left: 40rpx;
			margin-top: 40rpx;
			color: #17161B;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx;
			/* 150% */
		}

		.pop-close {
			margin-right: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.pop-text {
			color: #000;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx;
			/* 157.143% */
		}

		.pop-item {
			padding-left: 40rpx;
			margin: 20rpx 40rpx;
			height: 120rpx;
			flex-shrink: 0;
			border-radius: 12rpx;
			background: #FFF;
		}
	}


	.title {
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 88rpx;
		flex-shrink: 0;
		background-color: #F5F8FF;

		.title-cart {
			margin-left: 40rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background: #C9CBFF;
		}

		.title-cart-img {
			width: 28rpx;
			height: 28rpx;
		}

		.title-text {
			margin-left: 20rpx;
			color: #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
			/* 157.143% */
		}
	}

	.type-n {
		margin-right: 20rpx;
		padding: 8rpx 32rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E6E6E6;
		background: #F2F3F8;
		color: #6A6876;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx;
		/* 157.143% */
	}

	.type-y {
		margin-right: 20rpx;
		padding: 8rpx 32rpx;
		border-radius: 8rpx;
		background: #3B60D3;
		color: #FFF;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx;
		/* 157.143% */
	}

	.line {
		margin-top: 26rpx;
		width: 100%;
		height: 1rpx;
		background: #E4E8FC;
	}

	.input {
		padding-left: 26rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F6F7FB;
	}

	.search {
		color: #FFF;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
		width: 88rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #3B60D3;
	}

	.filter {
		margin-left: 40rpx;
		margin-right: 34rpx;
		width: 60rpx;
		flex-shrink: 0;
		height: 60rpx;
		border-radius: 8rpx;
		background: #F6F7FB;

		.filter-img {
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.item {
		margin-left: 20rpx;

		.step-status {
			position: relative;
			margin-top: 20rpx;
			height: 96rpx;
			width: 128rpx;
			border-radius: 12rpx;
			background: #3B60D3;
			flex-shrink: 0;
			color: #FFF;
			text-align: center;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx;
			/* 127.273% */
		}

		.step-status-n {
			position: relative;
			margin-top: 20rpx;
			height: 96rpx;
			width: 128rpx;
			border-radius: 12rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.20);
			background: #F2F3F8;
			width: 64rpx;
			color: #20252B;
			text-align: center;
			font-size: 22rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx;
			/* 127.273% */
		}

	}

	.item1 {
		margin-top: 30rpx;
		margin-right: 20rpx;
		margin-left: 52rpx;

		.cart {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: #F2F3F8;

			.cart-image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.item1-title {
			margin-left: 18rpx;
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			/* 166.667% */
		}

		.item1-status {
			padding: 0 16rpx;
			border-radius: 8rpx;
			background: #fce7d7;
			color: #F08537;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 36rpx;
			/* 180% */
		}

		.item1-key {
			color: #A3AAB0;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 200% */
		}

		.item1-value {
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 200% */
		}

		.price {
			color: #F5222D;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx;
			/* 142.857% */
		}

		.item1-line {
			margin-top: 30rpx;
			height: 1rpx;
			background: #E4E8FC;
		}

		.real {
			margin-right: 20rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			background: #F2F3F8;
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.reject {
			margin-right: 20rpx;
			width: 88rpx;
			height: 44rpx;
			border-radius: 8rpx;
			background: #F5222D;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.sure {
			margin-right: 20rpx;
			width: 88rpx;
			height: 44rpx;
			border-radius: 8rpx;
			background: #3B60D3;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.reject-apply {
			margin-right: 20rpx;
			width: 88rpx;
			height: 44rpx;
			border-radius: 8rpx;
			background: #6A6876;
			color: #FFF;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}

		.item1-status2 {
			padding: 0 16rpx;
			border-radius: 8rpx;
			background: #daedd1;
			color: #46A719;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 36rpx;
			/* 180% */
		}
	}

	.item3 {
		position: relative;

		.box1 {
			flex-shrink: 0;
			width: 116rpx;
			height: 72rpx;
		}

		.box2 {
			flex-shrink: 0;
			width: 200rpx;
			height: 72rpx;
		}

		.border-right {
			border-bottom: 0.3px solid #D7D8DD;
			border-right: 0.3px solid #D7D8DD;
			background: #F7F8FC;
		}

		.bg1 {
			background: #F7F8FC;
		}

		.bg2 {
			background: white;
		}

		.num1 {
			position: fixed;
			z-index: 99;
			box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.08);
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		height: 128rpx;
		flex-shrink: 0;
		border-top: 1rpx solid #EFEFEF;
		background: #FFF;
		box-shadow: 0px -8rpx 8rpx 0px rgba(0, 0, 0, 0.04);

		.bottom-bg {
			background-color: #F2F3F8;
			border-radius: 50%;
			width: 48rpx;
			height: 48rpx;
		}

		.bottom-img {
			width: 24rpx;
			height: 24rpx;
		}

		.bottom-text {
			margin-top: 22rpx;
			color: #676C7F;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}
	}
</style>